import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Dimensions } from 'react-native';
import { Flex, Icon, Toast } from 'antd-mobile-rn';
import moment from 'moment';


const constants = {};

const window = Dimensions.get("screen");

const sw = ((window.width-30) / 7) * 0.9;


/**
 * 获取日期列表
 * @param {*} date 
 */
const getDateList = (date) => {
    const list = [];
    const lastDate = moment(date).endOf("month");
    const dateCount = lastDate.date();
    for (let i = (dateCount - 1); i >= 0; i--) {
        // console.log("s::", i)
        const d = moment(lastDate.toDate()).add(i * -1, "d");
        list.push(d.toDate());
    }
    return list;
}



const getCalendar = (date) => {
    const calendar = {
        date: date,
        data: [],
        dateList: []
    }
    const dataList = getDateList(date);
    const firstDate = dataList[0];
    calendar.firstDate = firstDate;
    const w = moment(firstDate).get("day");
    for (let i = 0; i < w; i++) {
        calendar.data.push(moment(firstDate).add((w - i) * -1, "d").toDate());
    }
    dataList.forEach((value, index) => {
        calendar.data.push(value);
    });
    const lastDate = dataList[dataList.length - 1];
    calendar.lastDate = lastDate;
    const count = 42 - calendar.data.length;
    for (let i = 1; i <= count; i++) {
        calendar.data.push(moment(lastDate).add(i, "d").toDate());
    }
    let index = 0;
    const arr = [];
    let item = [];
    for (let i = 0; i < calendar.data.length; i++) {
        index++;
        item.push(calendar.data[i]);
        if (index >= 7) {
            index = 0;
            arr.push(item.map(d => d));
            item = [];
        }
    }
    calendar.dateList = arr;
    return calendar;
}

/**
 * 日历
 */
export default class ReportCalendar extends Component {



    constructor(props) {
        super(props);
        // this.state = {
        //     calendar: getCalendar(this.props.date)
        // }

    }
    handleChangeCalendar = (i) => {
        const date = moment(this.state.calendar.date).add(i, 'month').toDate();
        this.setState({
            calendar: getCalendar(date)
        });

        if (this.props.onCalendarChange) {
            this.props.onCalendarChange(date);
        }


    }


    componentDidMount() {


    }

    render() {

        const calendarData = getCalendar(this.props.date);

        const renderItemStyle = this.props.itemStyle ? this.props.itemStyle : () => { return {} };





        return (

            <View style={{ backgroundColor: "#fff",paddingLeft:15,paddingRight:15 }}>

                {
                    calendarData.dateList.map((item, i) => {
                        return (
                            <Flex key={i}>
                                {
                                    item.map((d, j) => {

                                        const { firstDate, lastDate } = calendarData;

                                        const colorStyle = (d.getTime() < firstDate.getTime() || d.getTime() > lastDate.getTime()) ? {
                                            color: "#ccc"
                                        } : {}

                                        return (
                                            <Flex.Item
                                                key={j}
                                                onPress={() => {
                                                    if (d && this.props.onItemClick) {
                                                        this.setState({
                                                            calendar: getCalendar(d)
                                                        })

                                                        this.props.onItemClick(d);
                                                    }
                                                }}
                                                style={{
                                                    height: sw,
                                                    alignItems: "center",
                                                    borderWidth: 0,
                                                    justifyContent: 'center',
                                                    textAlignVertical: 'center',
                                                    marginBottom: 5


                                                }}>
                                                <View style={[{
                                                    alignItems: "center",
                                                    justifyContent: "center",
                                                    width: sw,
                                                    height: sw,
                                                    borderRadius: 6,
                                                    textAlignVertical: 'center',
                                                    backgroundColor: "#f6f6f6",
                                                    position: "relative",
                                                    fontSize: 16,
                                                    ...renderItemStyle(d)

                                                }]}
                                                >
                                                    <View style={[{
                                                        width: "60%",
                                                        height: 3,
                                                        backgroundColor: "#BFC5D2",
                                                        marginBottom: 7,
                                                        borderRadius: 2,
                                                        ...this.props.lineStyle(d)
                                                    }]}></View>
                                                    <Text style={[{ fontSize: 14, marginTop: 2 }, colorStyle, renderItemStyle(d)]}>{moment(d).format("D")}</Text>

                                                </View>

                                            </Flex.Item>
                                        )
                                    })
                                }
                            </Flex>
                        )
                    })
                }

            </View>

        )
    }

}